<template>
  <div class="userPullDown">
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <slot></slot>
      </span>
      <template #dropdown>
        <!-- <el-dropdown-item command="userInfo" :SvgIcon="User">个人信息</el-dropdown-item> -->
        <el-dropdown-item command="updatePass" :icon="Edit">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
      </template>
    </el-dropdown>

    <updatePassword ref="updatePasswordRef" />
  </div>
</template>

<script setup>
import { Edit, SwitchButton } from '@element-plus/icons-vue'

// 引入修改密码组件
import updatePassword from '@/components/user/updatePassword.vue'

// 注入全局服务
const httpService = inject('httpService')
const util = inject('util')
const config = inject('config')
// 基础
const router = useRouter()
const store = useStore()
// 用户信息
const userInfo = ref(util.getSession(config.sessionKey.USER_INFO))
// 子组件引用
const updatePasswordRef = ref()
// 菜单操作处理
const handleCommand=(command)=> {
  switch (command) {
    case 'updatePass':
      updatePasswordRef.value.openDia()
      break
    case 'userInfo':
      // 预留
      break
    case 'logout':
      ElMessageBox.confirm('是否确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        httpService.post('/sys-login/logout').then(() => {
          util.clearSession()
          store.dispatch('menuTab/closeAll')
          router.push('/login')
        })
      })
      break
  }
}
</script>

<style scoped lang="scss">
.userPullDown {
  // 可按需自定义样式
}
</style>
